<template>
  <LoadingBar />
  <div class="main">
    <div style="margin-bottom: 50px">
      <div>路由实验</div>
      <router-link replace to="/">跳转 /</router-link>
      <hr />
      <router-link to="/B">跳转 /B</router-link>
      <div>
        <div>编程式导航</div>
        <button @click="gotoB('string')">字符串模式</button>
        <button @click="gotoB('path')">对象模式</button>
        <button @click="gotoB('objectName')">命名式路由模式</button>
      </div>
    </div>
    <div class="region">
      <div>路由切换区域</div>
      <!-- 路由出口 路由匹配到的组件将渲染在这里 -->
      <router-view #default="{ route, Component }">
        <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
          <component :is="Component"></component>
        </transition>
      </router-view>
    </div>
  </div>
</template>
:

<script setup lang="ts">
import LoadingBar from './LoadingBar.vue';
// 编程式导航
import { useRouter } from 'vue-router';
const router = useRouter();
const gotoB = (mode: string) => {
  if (mode === 'string') {
    router.replace('/B');
  } else if (mode === 'path') {
    router.push({ path: '/' });
  } else {
    router.push({ name: 'b', state: { id: 123 } });
  }
};

// 路由过渡特效
import 'animate.css';
</script>

<style lang="scss" scoped>
button {
  margin-left: 10px;
}
.main {
  margin: 40px;
  .region {
    width: 60vw;
    height: 300px;
    background-color: rgb(204, 248, 248);
  }
}
</style>
